<template>
	<view class="content ">
		<top-userinfo :userusername="userusername" ref="topuserinfo" :parentData="false"></top-userinfo>
		<!-- <view class="my-shop-hd">
			<view class="user-info">
				<uni-list :border="false">
					<uni-list-chat :avatar-circle="true" title="董嘎嘎" avatar="/static/img/img.png" note="18661899000"></uni-list-chat>
				</uni-list>
			</view>
			<view class="my-card">
				<view class="my-card-icon">
					<uni-icons type="vip" size="30"></uni-icons>
				</view>
				<view class="my-card-info">
					<text>我的超级抵现卡</text>
				</view>
				<navigator class="instructions" url="privilege_statement">特权使用说明</navigator>
			</view>
		</view> -->
		
		<view class="uni-flex uni-row">
			<uni-list> 
				<uni-list-item thumb="/static/img/module_icon/xiaofei_bishu.png" thumb-size="lg"
				title="累计消费金额" :note="getdatainfo.money_sum == 0 ? '0' : getdatainfo.money_sum.toString()" />
			</uni-list>
			<uni-list>
				<uni-list-item thumb="/static/img/module_icon/duihuan_jine.png" thumb-size="lg"
				title="累计兑换余额抵扣" :note="getdatainfo.score_sum == 0 ? '0' : getdatainfo.score_sum.toString()" />
			</uni-list>
		</view>
		<view class="uni-padding-wrap">
			<!-- <picker mode="date" :value="date" 
			@change="bindDateChange" style="margin-top: 30rpx;">
				<view class="uni-input">2024-10-10</view>
			</picker> -->
			<view class="uni-flex uni-row bg-radius">
				<view class="flex-item">
					<picker mode="date" :value="date" @change="bindDateChange">
						<view class="uni-date"><uni-icons type="calendar" size="16"></uni-icons>{{date}}</view>
					</picker>
				</view>
				<view class="flex-item">
					<view class="view-all" @click="getall">
						<uni-icons type="list" size="16" color="#000"></uni-icons> 
						查看所有
					</view>
				</view>
			</view>
			<scroll-view
			            class="dialogue-box"
			            style="height: 50vh"
			            :scroll-y="true"
			            :refresher-threshold="10"
			            :scroll-top="scrollTop"
			            @scrolltolower="handelLower"
			            :refresher-enabled="isLoadingTop"
			            :refresher-triggered="isTriggeredTop"
			            @refresherrefresh="handleRefresher"
			            @refresherrestore="handelonRestore"
			          >
				<view class="bg-radius" v-for="(item,index) in listarr" :key="index">
					<uni-row class="con-list">
						<uni-col :span="17" class="con-price">
							<view><text>金额：</text>{{item.money}}</view>
							<view><text>兑换余额抵扣：</text>{{item.score}}</view>
						</uni-col>
						<uni-col :span="7" class="con-time">
							<!-- <view>{{newdate(item.createtime)}}</view> -->
							<view class="datetimes">
								<text>{{newdate(item.createtime,3)}}</text>
								<text>{{newdate(item.createtime,2)}}</text>
							</view>
						</uni-col>
					</uni-row>
					
				</view>
				<uni-load-more :status="status" />
			</scroll-view>
			
			
		</view>
	</view>
</template>
<script>
	import {userconsumption_record} from "@/api/apiinfo";
	import {timestampToTemplatethoer,timestampToTemplate} from "@/utils/validate.js";
	import topuserinfo from './../../components/top_userinfo.vue';
	export default {
		components:{
			"top-userinfo":topuserinfo
		},
	    data() {
			const currentDate = this.getDate({
				format: true
			});
	        return {
				date: currentDate,
				userid:'',
				memberuser_id:'',
				memberrealname:'',
				membermobile:'',
				membercreatetime:'',
				
				status: 'more',
				scrollTop: "50px",
				loadings: "加载中。。。", //more/loading/noMore
				isLoadingTop: true,
				isTriggeredTop: true,				
				pagenumber:1,
				listtotal:0,
				listarr:[],
				memberrecharge_count:0,
				memberrecharge_amount:0,
				shopid:'',
				getdatainfo:{money_sum:0,score_sum:0,list:[]},
				userusername:'',
				getdate:''
	        };
	    },
		mounted() { ////////////////// uni组件样式重定义
		
			// var str = document.getElementsByClassName("uni-list-chat__header-image");
			// Array.prototype.forEach.call(str, function(headerImage){
			// 	headerImage.style.margin = "0";
			// });
			// var str = document.getElementsByClassName("uni-list-chat__content-title");
			// Array.prototype.forEach.call(str, function(contentTitle){
			// 	contentTitle.style.color = "#fff";
			// });
			// var str = document.getElementsByClassName("uni-list-chat__content-note");
			// Array.prototype.forEach.call(str, function(contentNote){
			// 	contentNote.style.color = "#fff";
			// });
			
			
			// var str = document.getElementsByClassName("uni-list-item");
			// Array.prototype.forEach.call(str, function(listItem){
			// 	listItem.style.backgroundColor = "transparent";
			// });
			// var str = document.getElementsByClassName("uni-list--border-bottom");
			// Array.prototype.forEach.call(str, function(borderBottom){
			// 	borderBottom.style.display = "none";
			// });
			// var str = document.getElementsByClassName("uni-list-item__content");
			// Array.prototype.forEach.call(str, function(item){
			// 	item.style.paddingRight = "0";
			// });
			// var str = document.getElementsByClassName("uni-list-item__container");
			// Array.prototype.forEach.call(str, function(item){
			// 	item.style.padding = "12px 10px 12px 15px";
			// });
			// var str = document.getElementsByClassName("uni-list-item__icon");
			// Array.prototype.forEach.call(str, function(item){
			// 	item.style.paddingRight = "0";
			// });
			// var str = document.getElementsByClassName("uni-list-item__icon-img");
			// Array.prototype.forEach.call(str, function(item){
			// 	item.style.marginRight = "0";
			// });
			// var str = document.getElementsByClassName("uni-list-item__content-note");
			// Array.prototype.forEach.call(str, function(item){
			// 	item.style.fontSize = "14px";
			// 	item.style.color = "#000";
			// 	item.style.fontWeight = "700"
			// });
			// var str = document.getElementsByClassName("uni-list--border-top");
			// Array.prototype.forEach.call(str, function(item){
			// 	item.style.backgroundColor = "transparent";
			// });
				
		},
		onLoad(option) {
			this.shopid = JSON.parse(decodeURIComponent(option.id))//this.$route.query.id;
			// this.shopid = this.$route.query.id;
			// this.userusername = localStorage.getItem('username');
			this.memberuser_id = uni.getStorageSync('memberuser_id');//会员ID
			this.memberrealname = uni.getStorageSync('memberrealname');//
			this.membermobile = uni.getStorageSync('membermobile');//
			this.membercreatetime = uni.getStorageSync('membercreatetime');//
			this.memberrecharge_count = uni.getStorageSync('memberrecharge_count');////充值次数
			this.memberrecharge_amount = uni.getStorageSync('memberrecharge_amount');////累计充值金额
			this.getuserconsumption_record(this.shopid,this.pagenumber)
			// let user_name = localStorage.getItem('username')
			// if(user_name == '' || user_name == null){
			// 	user_name = localStorage.getItem('nickname')
			// }
			// this.userusername = user_name;
			this.$nextTick(() => {
			    this.$refs.topuserinfo.getuserreload()
			});
		},
	    methods: {
			newdate(times,typenum){//时间戳转换时间格式
				console.log(times)
				return timestampToTemplatethoer(times * 1000,typenum)
			},
			getall(){
				this.pagenumber = 1
				this.getdate = ''
				this.getuserconsumption_record(this.shopid,this.pagenumber)
			},
			getuserconsumption_record(id,page,load) { //查询会员消费流水纪录
				this.status = 'loading'
				let data = {date:this.getdate} //this.date
				userconsumption_record(id,page,data).then((res) => {
					console.log("查询会员消费流水纪录接口返回数据：")
					this.getdatainfo = res.data
					this.listtotal = res.data.total;
					// this.topsum = res.data.sum.toString();
					console.log(JSON.stringify(res));
					if(res.data.list.length<=0 && page==1){
						this.listarr = []
						this.status = 'noMore'
					}else{
						if(load){
							if (res.data.list && res.data.list.length == 0) {
								uni.hideLoading();
								uni.showToast({
									title: '没有更多了',
									duration: 2000
								});
								this.status = 'noMore'
								this.pagenumber -= 1;
							} else {
								this.listarr = this.listarr.concat(res.data.list);
								uni.hideLoading();
								this.status = 'more'
							}
						}else{
							if(res.data.list.length >=1){
								this.listarr = res.data.list
								this.status = 'more'
								uni.hideLoading();
							}else{
								this.status = 'noMore'
							}
						}
					}
										
					console.log(JSON.stringify(this.listarr));
				}).catch(err => {
					console.log(JSON.stringify(err))
					this.status = 'noMore'
					if(Object.keys(err).length === 0){
						console.log('空')
					}else if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			// onChange(e) {
			// 	this.status = e.detail.value
			// },
			
			handelLower() {
				console.log("滚动到底部>>>");
				if (this.status == "loading") return;
			  	 if (!this.status == "noMore") return;
			  	  
			  	this.pagenumber += 1;
			  
				this.getuserconsumption_record(this.shopid,this.pagenumber, true)
			},
			handleRefresher() {
			  console.log("顶部下拉刷新s>>>", this.isLoadingTop, this.isTriggeredTop);
			  this.isLoadingTop = true;
			  this.isTriggeredTop = true;
			  if (!this.isLoadingTop) return;
			  this.pagenumber = 1
			  // this.$store.commit("setShipGuids", "");
			  this.getuserconsumption_record(this.shopid,this.pagenumber)
			  this.isLoadingTop = false;
			  this.isTriggeredTop = false;
			},
			handelonRestore() {
			  console.log("handelonRestore>>>");
			  this.isLoadingTop = true;
			},
			bindDateChange: function(e) {
				console.log(e)
				this.pagenumber = 1
			    this.date = e.detail.value
				this.getdate = this.date
				this.getuserconsumption_record(this.shopid,this.pagenumber)
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
				  
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			}
			
	    }
	}
</script>

<style lang="scss">
	.content{
		// padding: 100rpx 30rpx 30rpx;
		position: relative;
		
		.bg-radius{
			border-radius: 20rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			padding: 30rpx;
			box-shadow: 0 0 16rpx rgba(0, 0, 0, .05);
			background-color: #fff;
		}
		.uni-list-item{
			margin-top: 30rpx;
		}
		
		
		
		.uni-list{
			&::after{
				display: none;
			}
		}
		.uni-date{
			font-size: 28rpx;
			color: #000;
			padding: 6rpx 0;
			background-color: transparent;
		}
		// .uni-date{
		// 	font-size: 28rpx;
		// }
		.flex-item:first-child{
			width: 70%;
		}
		.flex-item:last-child{
			width: 30%;
		}
		.view-all{
			text-align: right;
			text-align: center;
			display: block;
			font-size: 28rpx;
			padding: 4rpx ;
			color: #000;
			border: 1px solid rgba(0, 0, 0, .2);
			border-radius: 8rpx;
		}
		
		
	}
	
	.uni-list{
		background-color: transparent;
	}
	// .uni-list-item{
	// 	padding: 0 !important;
	// }
	.con-list{
		display: flex;
		justify-content: center;
		align-items: center;
		// height: 200px;
		font-size: 28rpx;
		text{
			display: block;
		}
		.con-time{
			text-align: center;
			color: #999;
			text{
				font-weight: normal;
				font-size: 24rpx;
			}
		}
		.con-price{
			color: #000;
			font-weight: normal;
			// text-align: right;
			font-size: 24rpx;
			text{
				display: inline-block;
				width: 180rpx;
				text-align: right;
			}
		}
	}
	.uni-list-item{
		background-color: transparent !important
	}
	.uni-list--border-bottom{
		display: none !important
	}
	.uni-list-item__content{
		padding-right: 0 !important;
	}
	.uni-list-item__container{
		padding: 12px 10px 12px 15px !important;
	}
	.uni-list-item__icon{
		padding-right: 0;
	}
	.uni-list-item__icon-img{
		margin-right: 0;
	}
	.uni-list-item__content-note{
		font-size: 14px !important;
		color: #000 !important;
		font-weight: 700 !important;
	}
	.uni-list--border-top{
		background-color: transparent !important
	}
	.datetimes{
		font-size: 28rpx;
		text{
			display: block;
		}
	}
	// page{
	// 	background-color: #ddd;
	// }
	// @media (prefers-color-scheme: dark){}
</style>